<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/beiyong.css"/>
		<script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../js/req.js" type="text/javascript"></script>
		<script src="../js/vue.js" type="text/javascript"></script>
		
		<style type="text/css">
			
			.tou{
				width: 100%;
				height: auto;
				padding: 30px 40px;
			}
			
			.qian{
				font-size: 25px;
				font-weight: 500;
				font-family: "微软雅黑";
				text-align: center;
			}
			.text{
				width: 100%;
				text-align: center;
				padding: 10px;
				color: #7c7c7c;
			}
			.fc{
				display: flex;
				justify-content: flex-start;
				align-items: flex-start;
				flex-direction: column;
			}
			.list{
				width: 100%;
				padding: 10px;
				border-bottom: 1px solid #CCCCCC;
				font-size:0.875em;;
			}
			.list2{
				width: 100%;
				/*display: flex;
				justify-content: space-between;
				align-items: center;*/
				padding: 5px;
				
			}
			.b{
				color: #007AFF;
			}
			.listbut{
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 2px;
			}
			.listbut button{ padding:0px 8px;}
			.ic{
				height: 100%;
				display: flex;
				align-items: center;
				font-family: Muiicons;
			    font-size: 15px;
			    line-height: 1;
			    z-index: 20;
			    padding-top: 10px;
			    padding-bottom: 10px;
			    color: #FFFFFF;
			}
			*{
				font-family: "微软雅黑";
				color: #676664;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav hbg">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		    <h1 class="mui-title">我的收藏</h1>
		    <div class="ic mui-icon-right-nav mui-pull-right " onclick="seting()">编辑</div>
		</header>
		<div class="mui-content" >
			<div class="fc" id="probapp">
				
				
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/muishow.js" type="text/javascript"> </script>
		<script type="text/javascript">
			var flag = false;
			window.onload = function(){
				mui.init();
				
				
				collList();
				
			}
			function seting(){
				if(!flag){
					$("button").removeClass("mui-hidden");
				}
				else{
					$("button").addClass("mui-hidden");
				}
				flag = !flag;
			}
			function collList(){
				let data = {
					url:"/api/Book/book_keep_list",
					data:{access_token : acctoken()||""}
				}
				ajax(data,function(res){
					console.log(res,"res");
					if(res.code == 1){
						console.log(res);
						let str = "";
						if(res.data.length>0){
							for(let i = 0; i < res.data.length;i++){
								let time = ""
								if(res.data[i].time){
									time == res.data[i].time;
								}
								str += '<div class="list"><div class="listbut"><span id="">'+
								time+'</span>'+
								'<button type="button" class="mui-btn mui-btn-blue mui-hidden" '+
								'onclick="deleteColl(\''+
								res.data[i].book_user+'\','+
								res.data[i].book_id +',\''+
								res.data[i].book +
								'\')">取消</button></div>'+
								'<div class="list2">收藏了<span id="" class="b">'+
								res.data[i].book_user+
								'</span>的文章<span id="" class="b">《'+
								res.data[i].book+
								'》</span></div></div>';
							}
						}else{
							str = '<div class="nolistdiv">暂无收藏</div>';
						}
						g("probapp").innerHTML = str;
					}
				})
			}
			function deleteColl(user,id,name){
				    var btnArray = ['否', '是'];
				    mui.confirm('是否取消收藏'+user+'的'+name+'，确认？',"取消收藏", btnArray, function(e) {
				        if (e.index == 1) {
			        		let data = {
								url:"/api/Book/book_keep_delete",
								data:{
									access_token : acctoken()||"",
									id:id
								}
							}
							ajax(data,function(res){
								if(res.code == -1){
									mui.toast(res.message);
								}
								if(res.code == 1){
									console.log(res);
									mui.toast("已取消收藏");
									collList();
								}
							})
				        } else {
				            mui.toast("继续收藏");
				        }						   
				});

			}
		</script>
	</body>

</html>